<template>
  <div class="app-container">
    <div >

      <div class="x_box">
        <el-card class="box-card" shadow="hover" >
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-position="right">

            <!--el-form-item  所有搜索条件-->
            <el-form-item label="手牌" prop="USERNAME" label-width="100px">
              <el-input
                v-model="queryParams.USERNAME"
                clearable
                placeholder=""
              />
            </el-form-item>
            <el-form-item label="总费用" prop="USERNAME" label-width="100px">
              <el-input
                v-model="queryParams.USERNAME"
                clearable
                placeholder=""
              />
            </el-form-item>
            <el-form-item label="折扣额" prop="USERNAME" label-width="100px">
              <el-input
                v-model="queryParams.USERNAME"
                clearable
                placeholder=""
              />
            </el-form-item>
            <el-form-item label="赠送" prop="USERNAME" label-width="100px">
              <el-input
                v-model="queryParams.USERNAME"
                clearable
                placeholder=""
              />
            </el-form-item>
            <el-form-item label="补齐消费" prop="USERNAME" label-width="100px">
              <el-input
                v-model="queryParams.USERNAME"
                clearable
                placeholder=""
              />
            </el-form-item>
            <el-form-item label="实收额" prop="USERNAME" label-width="100px">
              <el-input
                v-model="queryParams.USERNAME"
                clearable
                placeholder=""
              />
            </el-form-item>
            <el-form-item label="实收现金" prop="USERNAME" label-width="100px">
              <el-input
                v-model="queryParams.USERNAME"
                clearable
                placeholder=""
              />
            </el-form-item>
            <el-form-item label="找零金额" prop="USERNAME" label-width="100px">
              <el-input
                v-model="queryParams.USERNAME"
                clearable
                placeholder=""
              />
            </el-form-item>
            <el-form-item label="同来" prop="USERNAME" label-width="100px">
              <el-input
                v-model="queryParams.USERNAME"
                clearable
                placeholder=""
              />
            </el-form-item>
            <el-form-item label="备注" prop="USERNAME" label-width="100px">
              <el-input
                v-model="queryParams.USERNAME"
                clearable
                placeholder=""
              />
            </el-form-item>
          </el-form>

        </el-card>
      </div>
      <br>


      <div class="big_box">

        <div class="left_box">
          <el-card class="box-card" shadow="hover" >
            <div class="mx_box" >
              <el-tabs v-model="activeName" @tab-click="handleClick" >
                <el-tab-pane label="明细模式" name="first">
                  <div>
                    <el-table :data="tableData" border show-summary style="width: 100%">
                      <el-table-column prop="id" label="消费名称" width="180"></el-table-column>
                      <el-table-column prop="name" label="数量"></el-table-column>
                      <el-table-column prop="amount1" sortable label="金额"></el-table-column>
                      <el-table-column prop="amount2" sortable label="折扣额"></el-table-column>
                      <el-table-column prop="amount3" sortable label="折后额"></el-table-column>
                    </el-table>

                  </div>

                </el-tab-pane>
                <el-tab-pane label="合计模式" name="second">合计模式</el-tab-pane>
                <el-tab-pane label="合计模式2" name="third">合计模式2</el-tab-pane>

              </el-tabs>
            </div>
          </el-card>
        </div>
        <div class="br"> </div>
        <div class="right_box">
          <el-card class="box-card" shadow="hover" >
            <div class="mx_box" >
              <div>
                <el-table :data="tableData1" border  style="width: 100%">
                  <el-table-column prop="date" label="付款" ></el-table-column>
                  <el-table-column prop="name" label="金额" ></el-table-column>
                  <el-table-column prop="address" label="账号"></el-table-column>

                </el-table>
                <br>
              </div>
              <div >
                <el-button class="button" type="primary" plain @click="handleAdd" >新增挂账</el-button>
                <el-button class="button" type="primary" plain @click="handleAdd" >会员余额</el-button>
                <el-button class="button" type="primary" plain @click="handleAdd" >扫描洗浴卷</el-button>
                <el-button class="button" type="primary" plain @click="handleAdd" >健身会员</el-button>

              </div>
              <br>
              <div>
                <el-button class="button" type="primary" plain @click="handleAdd" >线上支付</el-button>
                <el-button class="button" type="primary" plain @click="handleAdd" >其他付款</el-button>
                <el-button class="button" type="primary" plain @click="handleAdd" >删除付款</el-button>
                <el-button class="button" type="primary" plain @click="handleAdd" >挂转/同来提示</el-button>

              </div>
              <br>
              <div>
                <el-button class="button" type="primary" plain @click="handleAdd" >打印查询单</el-button>
                <el-button class="button" type="primary" plain @click="handleAdd" >打印鞋单</el-button>
                <el-button class="button" type="primary" plain @click="handleAdd" >过账</el-button>
                <el-button class="button" type="primary" plain @click="handleAdd" >推出</el-button>

              </div>
              <br>

            </div>
          </el-card>
        </div>



      </div>



    </div>
  </div>

</template>

<script>

export default {
  data() {

    return {
      // 遮罩层
      loading: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        USERNAME: ''
      },
      activeName: 'first',
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      tableData1: [{
        date: '500',
        name: '500',
        address: '110'
      }, {
        date: '500',
        name: '500',
        address: '110'
      }, {
        date: '500',
        name: '500',
        address: '110'
      }, {
        date: '500',
        name: '500',
        address: '110'
      }, {
        date: '500',
        name: '500',
        address: '110'
      }, {
        date: '500',
        name: '500',
        address: '110'
      }, {
        date: '500',
        name: '500',
        address: '110'
      }, {
        date: '500',
        name: '500',
        address: '110'
      }],
      tableData: [{
        id: '搓澡',
        name: '1',
        amount1: '234',
        amount2: '220',
        amount3: 110
      }, {
        id: '搓澡',
        name: '1',
        amount1: '234',
        amount2: '220',
        amount3: 110
      }, {
        id: '搓澡',
        name: '1',
        amount1: '234',
        amount2: '220',
        amount3: 110
      }, {
        id: '搓澡',
        name: '1',
        amount1: '234',
        amount2: '220',
        amount3: 110
      }, {
        id: '搓澡',
        name: '1',
        amount1: '234',
        amount2: '220',
        amount3: 110
      }, {
        id: '搓澡',
        name: '1',
        amount1: '234',
        amount2: '220',
        amount3: 110
      }, {
        id: '搓澡',
        name: '1',
        amount1: '234',
        amount2: '220',
        amount3: 110
      }, {
        id: '搓澡',
        name: '1',
        amount1: '234',
        amount2: '220',
        amount3: 110
      }, {
        id: '搓澡',
        name: '1',
        amount1: '234',
        amount2: '220',
        amount3: 110
      }, {
        id: '搓澡',
        name: '1',
        amount1: '234',
        amount2: '220',
        amount3: 110
      }]
    }
  },

  methods: {
    onSubmit() {
      console.log('submit!');
    },
    handleNodeClick(data) {
      console.log(data);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
}


</script>



<style lang="scss" scoped>

.big_box{height: 60%;display: flex;}
.left_box{width: 60%;height: 600px;}
.right_box{width: 40%;height: 600px;}
.button{width: 145px;height: 50px;}
.mx_box{height: 600px;margin: auto}
.x_box{height: 40%;}
.br{width: 2%;height: 600px;}

</style>
